<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大模型平台项目 - 部署方案图</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            box-sizing: border-box;
        }

        .diagram-container {
            width: 100%;
            max-width: 1200px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 30px;
            box-sizing: border-box;
        }

        .diagram-title {
            text-align: center;
            font-size: 26px;
            font-weight: 700;
            color: #006838; /* 主色 */
            margin-bottom: 5px;
        }

        .diagram-subtitle {
            text-align: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="diagram-container">
        <h1 class="diagram-title">大模型平台项目 - 部署方案图</h1>
        <p class="diagram-subtitle">基于国产化软硬件环境的集成与部署架构</p>
        <svg width="100%" viewBox="0 0 1140 780" xmlns="http://www.w3.org/2000/svg">
            <!-- 定义 -->
            <defs>
                <!-- 箭头样式 -->
                <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
                    markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                    <path d="M 0 0 L 10 5 L 0 10 z" fill="#6c757d" />
                </marker>
                <!-- 阴影滤镜 -->
                <filter id="dropshadow" height="130%">
                    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
                    <feOffset dx="2" dy="2" result="offsetblur"/>
                    <feComponentTransfer>
                        <feFuncA type="linear" slope="0.3"/>
                    </feComponentTransfer>
                    <feMerge>
                        <feMergeNode/>
                        <feMergeNode in="SourceGraphic"/> 
                    </feMerge>
                </filter>
                 <!-- 主卡片渐变 -->
                <linearGradient id="primary-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#e6f0eb;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ffffff;stop-opacity:1" />
                </linearGradient>
            </defs>
            
            <!-- 字体和图标定义 -->
            <style>
                .box-title { font-size: 16px; font-weight: 500; fill: #006838; }
                .box-subtitle { font-size: 12px; fill: #555; }
                .text-content { font-size: 13px; fill: #333; }
                .text-label { font-size: 11px; font-weight: 300; fill: #fbf8f8; }
                .line { stroke: #fcfcfc; stroke-width: 1.5; marker-end: url(#arrow); }
                .dashed-line { stroke: #6c757d; stroke-width: 1.5; stroke-dasharray: 4 4; marker-end: url(#arrow); }
                .icon { font-family: "Font Awesome 6 Free"; font-weight: 900; fill: #006838; }
            </style>

            <!-- 1. 客户端层 -->
            <g id="client-layer">
                <rect x="20" y="20" width="200" height="120" rx="10" fill="#fff" stroke="#e0e0e0" filter="url(#dropshadow)" />
                <text x="120" y="55" class="box-title" text-anchor="middle">客户端访问层</text>
                <text x="45" y="85" class="icon" font-size="24px"></text> <!-- fa-desktop -->
                <text x="75" y="85" class="text-content">业务人员 / 管理员</text>
                <text x="75" y="105" class="box-subtitle">OS: 麒麟 v10 / UOS</text>
            </g>

            <!-- 2. 网络接入与安全 -->
            <g id="network-layer">
                <rect x="320" y="20" width="500" height="120" rx="10" fill="#fff" stroke="#e0e0e0" filter="url(#dropshadow)" />
                <text x="570" y="50" class="box-title" text-anchor="middle">网络接入与安全层</text>
                <path d="M 450 65 V 115" stroke="#ccc" stroke-width="1"/>
                
                <text x="360" y="80" class="icon" font-size="20px"></text> <!-- fa-shield-halved -->
                <text x="385" y="85" class="text-content">企业防火墙</text>
                
                <text x="590" y="80" class="icon" font-size="20px"></text> <!-- fa-network-wired -->
                <text x="615" y="85" class="text-content">负载均衡器</text>
                <text x="615" y="105" class="box-subtitle">IPv4/IPv6 双栈</text>
            </g>

            <!-- 3. 大模型平台核心 -->
            <g id="platform-core">
                <rect x="250" y="170" width="640" height="340" rx="15" fill="url(#primary-gradient)" stroke="#B58E55" stroke-width="1.5" filter="url(#dropshadow)" />
                <text x="570" y="205" class="box-title" text-anchor="middle" font-size="18px">大模型文档智能生成平台</text>
                
                <!-- 应用服务集群 -->
                <rect x="270" y="230" width="300" height="260" rx="8" fill="#fff" stroke="#ccc"/>
                <text x="420" y="255" class="box-title" text-anchor="middle">应用服务集群</text>
                <text x="420" y="275" class="box-subtitle" text-anchor="middle">OS: 麒麟 v10 / UOS</text>
                <foreignObject x="280" y="290" width="280" height="180">
                     <ul xmlns="http://www.w3.org/1999/xhtml" style="font-size:13px; color:#333; margin:0; padding-left: 25px; line-height: 1.8;">
                         <li><i class="fas fa-cog" style="color:#006838; margin-right:5px;"></i>系统管理模块</li>
                         <li><i class="fas fa-database" style="color:#006838; margin-right:5px;"></i>数据获取模块</li>
                         <li><i class="fas fa-file-alt" style="color:#006838; margin-right:5px;"></i>模板/内容管理</li>
                         <li><i class="fas fa-magic" style="color:#006838; margin-right:5px;"></i>流水解析/文档生成</li>
                         <li><i class="fas fa-key" style="color:#006838; margin-right:5px;"></i>单点登录(SSO)模块</li>
                         <li><i class="fas fa-plug" style="color:#006838; margin-right:5px;"></i>智能体API接口</li>
                     </ul>
                </foreignObject>
                
                <!-- 大模型服务 -->
                <rect x="600" y="230" width="270" height="120" rx="8" fill="#fff" stroke="#ccc"/>
                <text x="735" y="255" class="box-title" text-anchor="middle">大模型推理服务</text>
                <text x="625" y="300" class="icon" font-size="40px"></text> <!-- fa-brain -->
                <text x="680" y="295" class="text-content">开源专属大模型</text>
                <text x="680" y="315" class="box-subtitle">（本地化部署）</text>
            </g>

            <!-- 4. 基础设施层 -->
            <g id="infrastructure-layer">
                <rect x="20" y="540" width="1100" height="180" rx="10" fill="#343a40" />
                <text x="570" y="570" text-anchor="middle" fill="#fff" font-size="18px" font-weight="500">基础设施层 (IaaS)</text>

                <!-- 数据库 -->
                <rect x="260" y="600" width="280" height="90" rx="8" fill="#fff" filter="url(#dropshadow)"/>
                <text x="320" y="630" class="icon" font-size="30px"></text> <!-- fa-database -->
                <text x="360" y="625" class="text-content">结构化数据库</text>
                <text x="360" y="645" class="box-subtitle">MySQL</text>

                <!-- 存储 -->
                <rect x="600" y="600" width="280" height="90" rx="8" fill="#fff" filter="url(#dropshadow)"/>
                <text x="660" y="630" class="icon" font-size="30px"></text> <!-- fa-folder-open -->
                <text x="700" y="625" class="text-content">非结构化文档存储</text>
                <text x="700" y="645" class="box-subtitle">国产化存储介质</text>

                <!-- 硬件 -->
                <text x="570" y="720" text-anchor="middle" fill="#B58E55" font-size="16px" font-weight="500">
                    <tspan class="icon"></tspan> <!-- fa-microchip -->
                    国产化硬件平台 (鲲鹏 / 海光)
                </text>
            </g>

            <!-- 5. 外部集成系统 -->
             <g id="external-systems">
                <!-- SSO -->
                <rect x="920" y="170" width="200" height="120" rx="10" fill="#fff" stroke="#e0e0e0" filter="url(#dropshadow)" />
                <text x="1020" y="205" class="box-title" text-anchor="middle">统一身份认证</text>
                <text x="945" y="245" class="icon" font-size="24px"></text> <!-- fa-id-card -->
                <text x="975" y="245" class="text-content">企业内现有SSO</text>
                
                <!-- Other Systems -->
                <rect x="920" y="320" width="200" height="120" rx="10" fill="#fff" stroke="#e0e0e0" filter="url(#dropshadow)" />
                <text x="1020" y="355" class="box-title" text-anchor="middle">其他业务系统</text>
                <text x="945" y="395" class="icon" font-size="24px"></text> <!-- fa-sitemap -->
                <text x="975" y="395" class="text-content">CRM, 风控系统等</text>
            </g>


            <!-- 连线 -->
            <!-- Client -> Network -->
            <path class="line" d="M 220 80 H 320" />
            <text x="255" y="75" class="text-label">HTTPS</text>
            
            <!-- Network -> Application -->
            <path class="line" d="M 570 140 V 170" />
            <text x="575" y="158" class="text-label">请求转发</text>

            <!-- App Cluster <-> Model Service -->
            <path class="line" d="M 570 330 H 600" />
            <path class="line" d="M 600 300 H 570" />
            <text x="573" y="295" class="text-label">模型调用</text>

            <!-- App Cluster -> Database -->
            <path class="line" d="M 420 490 V 600" />
            <text x="425" y="550" class="text-label"> </text>
            
            <!-- App Cluster -> Storage -->
            <path class="line" d="M 470 490 V 600" />
            <text x="565" y="565" class="text-label"> </text>

            <!-- App Cluster -> External SSO -->
            <path class="dashed-line" d="M 570 430 H 920" />
            <text x="720" y="425" class="text-label">SAML / OAuth 2.0</text>

            <!-- External Other Systems -> App Cluster -->
            <path class="dashed-line" d="M 920 380 H 570" />
            <text x="720" y="395" class="text-label">RESTful API 调用</text>

        </svg>
    </div>
</body>
</html>
